<template>
  <div class="icons_wrapper" ref="iconsWrapper">
    <div class="icons_wrapper_inner" @scroll="scrollEvent">
      <slot></slot>
    </div>
    <div class="icons-nav-wrapper">
      <div class="icons-nav" ref="iconsNav">
        <div
          ref="slipper"
          class="icons-nav-slipper"
          :style="{ transform: `translateX(${scrollWidth}px)` }"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const scrollWidth = ref(0);
    const iconsNav = ref(null);
    const iconsWrapper = ref(null);
    const slipper = ref(null);
    const scrollEvent = (e) => {
      // 获得滚动比例
      const percent =
        e.target.scrollLeft /
        (e.target.scrollWidth - iconsWrapper.value.clientWidth);
      // 计算滚动宽度
      const tempWidth =
        iconsNav.value.clientWidth * percent - slipper.value.clientWidth;
      if (tempWidth < 0) {
        scrollWidth.value = 0;
      } else {
        scrollWidth.value = tempWidth;
      }
    };

    return {
      scrollWidth,
      iconsNav,
      scrollEvent,
      iconsWrapper,
      slipper,
    };
  },
};
</script>

<style scoped>
.icons_wrapper {
  margin-top: 10px;
  width: 100%;
  padding: 10px 0;
  border-radius: 40px;
  overflow: hidden;
}
.icons_wrapper_inner {
  padding: 20px;
  padding-bottom: 0;
  display: flex;
  overflow-y: hidden;
  overflow-x: auto;
  background: #fff;
}
.icons-nav-wrapper {
  display: flex;
  height: 20px;
  justify-content: center;
  align-items: center;
  background: #fff;
}
.icons-nav {
  height: 5px;
  width: 40px;
  background: #d6d6d6;
  border-radius: 4px;
  background-color: #d6d6d6;
}
.icons-nav-slipper {
  height: 5px;
  width: 15px;
  background: #ff6d2a;
  border-radius: 0.04rem;
  background-color: #ff6d2a;
  will-change: transform;
}
</style>